<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/sass.js/0.3.0/sass.min.js">
    <style>
    @mixin transition($sizing){
        -webkit-transition:$sizing;
           -moz-transition:$sizing;
                transition:$sizing;
    }
    @mixin transform($sizing){
        -webkit-transform:$sizing;
           -moz-transform:$sizing;
                transform:$sizing;
    }
      *{margin: 0; padding: 0;}
      .box{width: 100%; height: 400px; background: #333; }
      #warp{width: 100%; height: 400px; float: right; position: relative;}
      .box img{width: 450px;}
      .box .p1{position: absolute; right: 100px; top: 45px;  transform:translateX(0) translateY(0);}
      .box .p2{position: absolute; right: 100px; top: 50px;  transform:translateX(0) translateY(0);}
      .box .p3{position: absolute; right: 100px; top: 70px; transform:translateX(0) translateY(0);}
    }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div class="box">

        <div id="warp">
          <div class="p1">
              <img src="p1.png" alt="">
          </div>
          <div class="p2">
              <img src="p2.png" alt="">
          </div>
          <div class="p3">
              <img src="p3.png" alt="">
          </div>
        </div>
    </div>
    <script>
    $("#warp").mouseover(function(ev){
        var ev1=ev||window.event;
          var X=  ev1.pageX;
          var y=  ev1.pageY;
         $("#warp").mousemove(function(ev){
            var ev=ev||window.event;
             console.log(document.body.clientWidth +"==="+ev.pageX+"==="+ev.pageY);
            var X1=((document.body.clientWidth-ev.pageX)-(document.body.clientWidth/2))/30;
            var Y1=(ev.pageY-200)/30;
            if( X1>10){
                X1=10;
            }
            if( Y1>10){
                Y1=10;
            }
            var X2=X1*2;
            var Y2=Y1*2;
            var X3=X1*3;
            var Y3=Y1*3;
            // $("#warp").css({'webkitTransform':'rotateX('+Y1+'deg) rotateY('+X1+'deg) '});
            //console.log(document.body.clientWidth-ev.pageX);
           $(".p1").css({'webkitTransform':'translateX('+X1+'px) translateY('+Y1+'px)'});
           $(".p2").css({'webkitTransform':'translateX('+X2+'px) translateY('+Y2+'px)'});
           $(".p3").css({'webkitTransform':'translateX('+X3+'px) translateY('+Y3+'px)'});

         })
    });
     $("#warp").mouseout(function(){
        $(".p1").css({'webkitTransform':'translateX(0px) translateY(0px)'});
        $(".p2").css({'webkitTransform':'translateX(0px) translateY(0px)'});
        $(".p3").css({'webkitTransform':'translateX(0px) translateY(0px)'});
     });
    </script>
</body>
</html>